<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<title>add4</title>
		<link rel="stylesheet" type="text/css" href="../css/swiper3.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/home.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<!--<script src="../js/carousel.js"></script>-->
		<script src="../js/init.js"></script>
		<link rel="icon" href="../images/favicon.ico" />
		<style type="text/css">
			.top {
				position: relative;
				text-align: center;
				font-size: 0.3rem;
				height: 0.8rem;
				line-height: 0.8rem;
			}
			
			.top .back {
				position: absolute;
				left: 0.2rem;
				top: 0rem;
			}
			
			.top .con {
				position: relative;
				font-size: 0.3rem
			}
			
			.top .con .video {
				position: absolute;
				top: 0rem;
			}
			
			.middle {
				height: 0.6rem;
			}
			
			.middle .left {
				position: absolute;
				width: 50%;
				font-size: 0.12rem;
				left: 0;
				text-align: center;
			}
			
			.middle .right {
				position: absolute;
				width: 50%;
				font-size: 0.12rem;
				right: 0;
				text-align: center;
			}
			
			.middle .contain {
				display: inline-block;
				padding: 0.1rem;
				width: 1rem;
			}
			
			.active {
				border-bottom: 2px solid #eee;
			}
			.imgs {
				overflow: hidden;
			}
			.imgs div {
				display: inline-block;
				width: 32%;
				float: left;
				margin-left: 0.08rem;
				height: 3.68rem;
			}
			
			.imgs img {
				width: 2.4rem;
				margin: 0;
			}
			.clear {
				clear: both;
			}
			.bottom img {
				position: fixed;
				bottom: 0.1rem;
				left: 3.2rem;
				width: 1rem;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<text class="iconfont back">&#xe601;</text>
			<div class="con"><text class="left">共享照片</text><text class="iconfont video">&#xe612;</text></div>
		</div>
		<div class="middle">
			<div class="left">
				<div class="contain active"><text>照片</text></div>
			</div>
			<div class="right">
				<div class="contain"><text>视频</text></div>
			</div>
		</div>
		<div class="imgs">
			<div>
				<img src="../images/1.jpg" />
			</div>
			<div>
				<img src="../images/2.jpg" />
			</div>
			<div>
				<img src="../images/3.jpg" />
			</div>

			<div>
				<img src="../images/4.jpg" />
			</div>

			<div>
				<img src="../images/5.jpg" />
			</div>
			<div>
				<img src="../images/6.jpg" />
			</div>
			<div>
				<img src="../images/7.jpg" />
			</div>
			<div>
				<img src="../images/8.jpg" />
			</div>
			<div>
				<img src="../images/8.jpg" />
			</div>
		</div>
		<div class="bottom">
			<img src="../images/more.png" alt="" />
		</div>
	</body>

</html>